import WxCanvas from './wx-canvas';
import * as echarts from './echarts';
import {
  getChart
} from './util';

let ctx;
var timer = null;
Component({
  properties: {
    canvasId: {
      type: String,
      value: 'ec-canvas'
    },
    option: {
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {
        if (newVal) {
          this.setData({
            'ec': getChart(newVal, this)
          });
          if (this.data.ready) {
            this.init();
          }
        }
      }
    },
    radarImgShow: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {
        if (!newVal) {
          console.log('test001')
          this.setData({
            'ec': getChart(this.properties.option, this)
          });
          if (this.data.ready) {
          this.init();
          }
        }
      }
    }
  },

  data: {
    ready: false,
    loaded: false,
    ec: null
  },

  ready: function () {
    this.setData({
      ready: true
    });
    if (!this.data.loaded) {
      this.init();
    }
  },

  methods: {
    init: function (callback) {
      this.setData({
        loaded: true
      });
      const version = wx.version.version.split('.').map(n => parseInt(n, 10));
      const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) ||
        (version[0] === 1 && version[1] === 9 && version[2] >= 91);
      if (!isValid) {
        console.error('微信基础库版本过低，需大于等于 1.9.91。' +
          '参见：https://github.com/ecomfe/echarts-for-weixin' +
          '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
        return;
      }

      ctx = wx.createCanvasContext(this.data.canvasId, this);

      const canvas = new WxCanvas(ctx, this.data.canvasId);

      echarts.setCanvasCreator(() => {
        return canvas;
      });

      var query = wx.createSelectorQuery().in(this);
      query.select('.ec-canvas').boundingClientRect(res => {
        let that = this;
        let opt = {
          x: 0,
          y: 0,
          width: res.width,
          height: res.height,
          canvasId: this.data.canvasId,
          success: function (res) {
            that.setData({
              radarImg: res.tempFilePath
            });

          },
          fail: function (e) {
            // console.log(e)
          }
        }

        if (typeof callback === 'function') {
          this.chart = callback(canvas, res.width, res.height);
        } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
          clearTimeout(timer)
          timer = setTimeout(() => {
            this.canvasToTempFilePath(opt)
          }, 2000)
          this.chart = this.data.ec.onInit(canvas, res.width, res.height);
        } else {
          this.triggerEvent('init', {
            canvas: canvas,
            width: res.width,
            height: res.height
          });
        }
      }).exec();
    },

    canvasToTempFilePath(opt) {

      if (!opt.canvasId) {
        opt.canvasId = this.data.canvasId;
      }

      ctx.draw(true, () => {
        wx.canvasToTempFilePath(opt, this);
      });
    },

    touchStart(e) {
      if (this.chart && e.touches.length > 0) {
        var touch = e.touches[0];
        this.chart._zr.handler.dispatch('mousedown', {
          zrX: touch.x,
          zrY: touch.y
        });
        this.chart._zr.handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y
        });
      }
    },

    touchMove(e) {
      if (this.chart && e.touches.length > 0) {
        var touch = e.touches[0];
        this.chart._zr.handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y
        });
      }
    },

    touchEnd(e) {
      if (this.chart) {
        const touch = e.changedTouches ? e.changedTouches[0] : {};
        this.chart._zr.handler.dispatch('mouseup', {
          zrX: touch.x,
          zrY: touch.y
        });
        this.chart._zr.handler.dispatch('click', {
          zrX: touch.x,
          zrY: touch.y
        });
      }
    }
  }
});